<template>
  <div id="app">
    <el-dialog
        :visible.sync="addCompanyDialog" title="录入公司信息"
        width="50%"
        center
        :show-close="true"
        :before-close="handleClose"
    >
      <el-form ref="form" :model="form" :rules="rules"
               style="display: flex;justify-content:flex-start;flex-wrap: wrap;align-items: flex-start"
               label-width="100px"
      >
        <el-form-item label="公司名称：" style="margin-right: 20px" prop="companyName">
          <el-input v-model="form.companyName" size="small" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="公司地址：" prop="companyAddress">
          <el-input v-model="form.companyAddress" type="textarea" placeholder="请输入公司地址" size="small"></el-input>
        </el-form-item>
        <el-form-item label="公司类型：" prop="companyType">
          <el-select size="small" clearable multiple v-model="form.companyType"
                     placeholder="请选择">
            <el-option v-for="item in typeList" :key="item.type" :label="item.name"
                       :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人：" style="margin-right: 20px" prop="personName">
          <!--        <el-select size="small" clearable v-model="data.personName" filterable-->
          <!--                   placeholder="请选择负责人">-->
          <!--          <el-option v-for="item in personNameList" :key="item.userId" :label="item.userName"-->
          <!--                     :value="item.userId">-->
          <!--          </el-option>-->
          <!--        </el-select>-->
          <el-input v-model="form.personName" placeholder="请输入公司负责人" size="small"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="companyPhone">
          <el-input v-model="form.companyPhone" placeholder="请输入公司联系电话" size="small"></el-input>
        </el-form-item>
        <el-form-item label="紧急电话：" prop="exigencyPhone">
          <el-input v-model="form.exigencyPhone" placeholder="请输入紧急电话" size="small"></el-input>
        </el-form-item>
      </el-form>
      <div style="display: flex;align-items: center" id="photos">
        <div style="width:80px;text-align: center;margin-top: 30px">营业执照：</div>
        <div>
          <span style="color:gray;font-size: 12px;">(粘贴复制即可上传图片)</span>
          <div class="div" style="display: flex;align-items: center">
            <div v-for='(v, i) in preSalesImg' style="display: flex;align-items: center;margin-right: 10px;">
              <el-image :key="i" style="width: 50px; height: 50px"
                        ref="preview" :src="v" :preview-src-list="preSalesImgList">
              </el-image>
              <div @click="deletePic(i)">
                <el-icon name="delete"></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCompany">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "addCompany",
  created() {
    document.addEventListener('paste', this.handlePaste)
  },
  data() {
    return {
      form: {},
      addCompanyDialog: false,
      rules: {
        companyName: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
        companyType: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
        personName: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
        exigencyPhone: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
        companyPhone: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
        companyAddress: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
      },
      host: this.$imgHost,
      companyName: "",
      preSalesImg: [],
      preSalesImgList: [],
      personNameList: [],
      upImage: [],
      typeList: [],
    }
  },
  methods: {
    submitForm() {

    },
    handleOpen(val) {
      this.form = this.$options.data.call(this).form
      this.upImage = ""
      this.addCompanyDialog = true
      this.$api.budgetGetSupplierTypeVo({brandPartyId: val}).then(res => {
        this.typeList = res
      })
    },
    handleClose() {
      this.addCompanyDialog = false
    },
    submitCompany() {
      if (this.upImage.length == 0) {
        this.$message.error("请上传营业执照！")
        return
      }
      const data = {
        ...this.form,
        licenseUrl: this.upImage
      }
      this.$api.companyAddCompany(data).then(res => {
        if (res == 1) {
          this.$message.success("添加成功！")
          this.$emit('addStatus', 1);
        }
      })
    },
    deletePic(i) {
      this.preSalesImg.splice(i, 1)
      this.upImage.splice(i, 1)

    },
    handlePaste(event) {
      const clipboardData = event.clipboardData || window.clipboardData;
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i];

          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile();
            if (file) {
              this.uploadImage(file);
            }
          } else {
            this.$message.error('请拷贝图片!');
            break;
          }
        }
      }
    },
    uploadImage(imageFile) {
      const formData = new FormData();
      formData.append('file', imageFile);
      axios.post(`${this.$apiHost}/img/fileImgUrl`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'token': window.$quinn.getStorage("tokenv3")
        }
      }).then(response => {
        this.upImage.push(response.data.result[0])
        this.preSalesImg.push('https://' + response.data.result[0]);
        this.preSalesImgList.push('https://' + response.data.result[0]);
      })
          .catch(error => {
          });
    },

  }
}
</script>

<style scoped>
.el-form-item {
  width: 45%;
}

.el-select {
  width: 100%;
}
</style>